<script setup lang="ts">
import { ref, reactive } from 'vue'
import TitleBar from '@/components/common/TitleBar.vue'

// 日期范围
const daterange = ref([Date.now(), Date.now()])
function onDaterangeChange(r: any) {
  console.log(daterange.value)
}

// 时间切换按钮
const buttons = reactive(['当日热门', '过去三天热门', '过去一周热门', '当月热门'])

const activeIndex = ref(0)
</script>

<template>
  <div class="container">
    <title-bar>热门词汇</title-bar>
    <div class="bar-container">
      <!-- 日期范围 -->
      <el-date-picker
        v-model="daterange"
        type="daterange"
        range-separator="~"
        @change="onDaterangeChange"
        style="flex: 0 0 auto; width: 220px"
      />

      <!-- 统计图切换按钮 -->
      <div class="button-group">
        <el-button
          v-for="(item, index) in buttons"
          :key="index"
          :type="activeIndex === index ? 'primary' : 'default'"
          @click="activeIndex = index"
        >
          {{ item }}
        </el-button>
      </div>
    </div>

    <div class="img-wrap">
      <img src="@/assets/img/word_cloud.png" alt="" style="width: 500px" />
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
}

.bar-container {
  display: flex;
  align-items: center;
  padding: 20px 30px;
}

.button-group {
  margin-left: 100px;
}

.img-wrap {
  padding: 20px 150px;
}
</style>
